<script lang="ts" setup>
  import { ref, watch, onMounted, onUnmounted } from 'vue';
  import * as echarts from 'echarts/core';
  const props = defineProps({
    graphDataAI: Array<any>,
    graphDataMM: Array<any>,
    graphDataPLC: Array<any>,
    xdata: Array<any>,
  });

  const chartRef = ref<HTMLElement | null>(null);
  let chartInstance: echarts.ECharts | null = null;
  const option = ref<any>({
    grid: {
      top: '8%',
      left: '2%',
      right: '2%',
      bottom: '0%',
      containLabel: true,
    },
    // animation: false,
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }, //阴影
    },
    legend: {
      data: ['MM设定值', '实时值', 'AI模型设定值'],
      right: '6%',
      top: '0%', // Position at the top
      textStyle: {
        color: '#c0c4cc',
        fontSize: 10,
      },
      itemWidth: 15,
      itemHeight: 10,
    },
    xAxis: {
      data: [],
      type: 'category',
      axisLabel: {
        color: '#fff',
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      z: 10,
    },
    yAxis: {
      color: '#fff',
      name: 'mm',
      nameTextStyle: {
        color: '#fff',
        fontSize: 12,
      },
      boundaryGap: ['0', '10%'],
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
      axisLabel: {
        color: '#fff',
      },
      splitLine: {
        show: false,
      },
      scale: true,
    },
    series: [
      {
        type: 'line',
        name: 'MM设定值',
        data: [],
        symbol: 'none',
        lineStyle: {
          width: 1,
          // color: '#00baff',
          color: '#e7bcf3',
        },
        itemStyle: {
          color: '#e7bcf3', // 圆点颜色（与折线颜色一致）
        },
        force: {
          layoutAnimation: false,
        },
        symbolSize: 1,
        smooth: false, //曲线or折线
      },
      {
        type: 'line',
        name: '实时值',
        data: [],
        symbol: 'none',
        lineStyle: {
          width: 1,
          // color: '#f4c74f',
          color: '#3088f4',
        },
        itemStyle: {
          color: '#3088f4', // 圆点颜色（与折线颜色一致）
        },
        force: {
          layoutAnimation: false,
        },
        symbolSize: 1,
        smooth: false,
      },
      {
        type: 'line',
        name: 'AI模型设定值',
        data: [],
        symbol: 'none',
        lineStyle: {
          width: 1,
          // color: '#2af598',
          color: '#ffc720',
        },
        itemStyle: {
          color: '#ffc720', // 圆点颜色（与折线颜色一致）
        },
        force: {
          layoutAnimation: false,
        },
        smooth: false,
        symbolSize: 1,
      },
    ],
  });

  const initCharts = () => {
    option.value.xAxis.data = props.xdata;
    option.value.series[0].data = props.graphDataMM;
    option.value.series[1].data = props.graphDataPLC;
    option.value.series[2].data = props.graphDataAI;
    if (chartRef.value && !chartInstance) {
      chartInstance = echarts.init(chartRef.value);
      chartInstance?.setOption(option.value, true);
    }
  };

  const updateChart = () => {
    option.value.xAxis.data = props.xdata;
    option.value.series[0].data = props.graphDataMM;
    option.value.series[1].data = props.graphDataPLC;
    option.value.series[2].data = props.graphDataAI;
    if (chartRef.value && chartInstance) {
      chartInstance.setOption(option.value, true);
    }
  };

  watch(
    () => [props.graphDataMM, props.graphDataPLC, props.graphDataAI],
    () => updateChart(),
    { deep: true }
  );

  onMounted(() => {
    // 确保在 DOM 加载完成后更新图表
    setTimeout(() => {
      initCharts();
    }, 100);

    // 添加窗口大小变化监听
    window.addEventListener('resize', updateChart);
  });

  onUnmounted(() => {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', updateChart);
    chartInstance?.dispose();
  });

  defineExpose({
    updateChart, // 暴露方法到父组件
    chartRef,
  });
</script>

<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<style scoped>
  .chart-container {
    width: 100%;
    height: 100%;
  }
</style>
